<template>
  <div
    class="flex items-center text-white text-[14px] overflow-auto flex-nowrap gap-[10px]"
    v-if="data?.length > 0"
  >
    <a
      :href="getTargetUrl(`/searchResult?categoryType=${item?.categoryType}`)"
      v-for="(item, index) in data"
      :key="index"
      class="shrink-0 border-[2px] border-solid rounded-full p-[4px_8px] border-[#ffffff50] bg-[#ffffff50]"
    >
      {{ item?.categoryName }}
    </a>
  </div>
</template>

<script lang="ts" setup>
const { hostName } = useConfigStore();
const { data } = await useFetch<ConfigJsonType>("/api/getRandomHots", {
  method: "POST",
  body: { hostName },
});
</script>

<style scoped></style>
